<template>
	<view class="tui-center">
		
		<view class="tui-search-box" @tap="navTo('/pagesA/search/search')">
			<tui-head-search :hotSearch="hotSearch"></tui-head-search>
		</view>
		
		<!--<view class="uni-swiper-slide-frame">
			<view class="menu-swiper-item tui-flex tui-space-between">
				<view class="menu-tab-box" v-for="(item, index) in perTabList" :key="index">
					<view style="width: 94rpx;height: 94rpx;">
						<image class="tab-img" :src="item.image" mode=""></image>
					</view>
					<view>{{item.title}}</view>
				</view>
			</view>
		</view>-->
		
		<!--热门推荐-->
		<view class="tui-centerrecommend">
			<view class="tui-centerrecommend-item">
				<view class="tui-centerrecommend-title tui-pd-bottom">热门推荐</view>
				<view class="tui-pd-bottom" v-for="(item, index) in commendList" :key="index">
					<view class="tui-centerrecommend-flex" @tap="navTo(item.url)">
						<view class="tui-center-image">
							<image class="tui-centerrecommend-img" :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="tui-center-box">
							<view class="tui-center-title">{{item.title}}</view>
							<view class="tui-centerrecommend-center">{{item.conter}}</view>
							<view>
								<text class="tui-centerrecommend-pric">￥{{item.pric}}元</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import tuiHeadSearch from '@/components/head-search/head-search.vue'
	
	export default {
		name: 'periphery',
		components: {
			tuiHeadSearch
		},
		data() {
			return {
				bgcolor: '#AADCFD',
				hotSearch: ['美食/酒店', '游玩/演出', '景点/门票'],
				perTabList: [],
				commendList: []
			}
		},
		onLoad() {
			this.getListData()
		},
		methods: {
			async getListData() {
				this.perTabList = await this.$api.json('perTabList')
				this.commendList = await this.$api.json('commendList')
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tui-search-box {
		padding: $uni-spacing-row-base;
	}
	.uni-swiper-slide-frame {
		margin: 0 20rpx;
		.menu-swiper-item {
			background-color: $uni-bg-color;
			padding: 30rpx;
			border-radius: 20rpx;
			.menu-tab-box {
				text-align: center;
				color: $font-color-dark;
				.tab-img {
					width: 94rpx;
					height: 94rpx;
				}
			}
		}
	}
	.tui-centerrecommend{
		margin: 20rpx 0 100rpx;
		.tui-centerrecommend-item {
			padding: $uni-spacing-row-base;
			background-color: $uni-bg-color;
			.tui-centerrecommend-title {
				color: #FF7900;
				font-size: $uni-font-size-lg;
				text-align: center;
			}
			.tui-centerrecommend-flex {
				display: flex;
				.tui-center-image {
					width: 220rpx;
					height: 185rpx;
					.tui-centerrecommend-img{
						width: 100%;
						height: 100%;
					}
				}
				.tui-center-box {
					// width: 65%;
					flex: 1;
					padding-left: $uni-spacing-row-lg;
					line-height: 1.6;
					.tui-center-title {
						font-weight: 600;
						font-size: 34rpx;
					}
					.tui-centerrecommend-center {
						font-size: 28rpx;
						color: #666666;
						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
					.tui-centerrecommend-pric {
						font-size: $uni-font-size-lg;
						color: #FF7900;
						font-weight: 600;
					}
				}
				
			}
		}
	}
</style>
